<template>
   <!-- 新增 -->
    <el-dialog title="新增区域" :visible="isshow" width="630px"  @close="closeFn">
  <el-form ref="addform" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="活动名称:" prop="name" >
      <el-input
      v-model="formData.name"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      >
      </el-input>
    </el-form-item>
     <el-form-item prop="regionId" label="所在区域:">
          <el-select v-model="formData.regionId"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
              v-for="(item, index) in WorOrder"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="所属商圈:"  prop="businessId">
          <el-select v-model="formData.businessId"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
              v-for="item in areaCode"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="ownerId">
          <el-select v-model="formData.ownerId"
           placeholder="请选择"
           style="width:396px"
           >
            <el-option
              v-for="item in ownerName"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" prop="selectedOptions">
          <template>
            <el-cascader
            v-model="formData.selectedOptions"
            style="width:396px"
              :options="depts"
              size="large"
              placeholder="请选择"
              @change="handleChange"
            />
              </template>
        </el-form-item>
    <el-form-item prop="descAddr">
      <el-input
      v-model="formData.descAddr"
      style="width:396px"
        type="textarea"
        :rows="4"
         autocomplete="off"
        placeholder="请输入详细地址"
        maxlength="60"
        show-word-limit>
</el-input>
    </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="closeFn"  class="el-buttonxx">取 消</el-button>
              <el-button class="el-buttonx" @click="submit">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>
</template>

<script>
import { getRegonslist, getBusiness, getBelonglist, addPoint, nodeSearch } from '@/api/point'
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  props: {
    isshow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      WorOrder: [],
      areaCode: [],
      ownerName: [],
      depts: regionData,
      dz: '',
      formData: {
        name: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        selectedOptions: [],
        descAddr: '',
        createUserId: 1
      },
      rules: {
        name: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        regionId: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        businessId: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        ownerId: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        selectedOptions: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ],
        descAddr: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      pageParamss: {
        pageIndex: 1,
        pageSize: 1000
      },
      pageParamsss: {
        pageIndex: 1,
        pageSize: 100000
      },
      // 回显操作的数据
      editItem: {}
    }
  },
  created () {
    this.getRegonslist()
    this.getBusiness()
    this.getBelonglist()
  },
  methods: {
    // 点位区域搜索列表
    async getRegonslist () {
      const res = await getRegonslist({ ...this.pageParamss })
      this.WorOrder = res.data.currentPageRecords
      // console.log(res)
    },
    // 所属商圈表单
    async getBusiness () {
      const res = await getBusiness()
      // console.log(res)
      this.areaCode = res.data
    },
    // 归属合作商表单
    async getBelonglist () {
      const res = await getBelonglist({ ...this.pageParamsss })
      // console.log(res)
      this.ownerName = res.data.currentPageRecords
    },
    handleChange (value) {
      if (value[1] != null && value[2] != null) {
        var dz =
        CodeToText[value[0]] +
          '/' +
          CodeToText[value[1]] +
          '/' +
          CodeToText[value[2]]
        this.addressid = value[2]
      } else {
        if (value[1] != null) {
          dz = CodeToText[value[0]] + '/' + CodeToText[value[1]]
          this.addressid = value[1]
        } else {
          dz = CodeToText[value[0]]
          this.addressid = value[0]
        }
      }
      this.address = dz

      //   console.log(dz)
      this.dz = dz
      //   console.log(value)
    },
    // 点击确认
    async submit () {
      try {
        await this.$refs.addform.validate()
        const newDz = this.dz.split('/')
        newDz.push(this.formData.descAddr)
        const addr = newDz.join('-')
        const areaCode = this.formData.selectedOptions[1]
        const ownerName = this.ownerName.find((item) => {
          return item.id === this.formData.ownerId
        }).name
        await addPoint({
          name: this.formData.name,
          addr,
          areaCode,
          createUserId: this.formData.createUserId,
          regionId: this.formData.regionId,
          businessId: this.formData.businessId,
          ownerId: this.formData.ownerId,
          ownerName
        })
        this.$message.success('添加点位成功')
        this.closeFn()
        this.$emit('getRegons')
      } catch (err) {
        console.log(err)
      }
    },
    // 点击x
    closeFn () {
      this.$emit('update:isshow', false)
      // 重置表单
      this.$refs.addform.resetFields()
      this.formData = {
        name: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        descAddr: '',
        selectedOptions: [],
        createUserId: this.$store.getters.userId
      }
      // 重置表单
      this.editItem = {}
    },
    // 搜索点击修改的那个对象
    async getEditItem (name, regionId) {
      try {
        const res = await nodeSearch({
          name,
          regionId
        })
        // console.log(res)
        this.editItem = res.data.currentPageRecords[0]
        // 对数据进行处理，后面进行回显
        this.formData.name = this.editItem.name
        this.formData.regionId = this.editItem.regionId
        this.formData.businessId = this.editItem.businessId
        this.formData.ownerId = this.editItem.ownerId
        const newAddr = this.editItem.addr.split('-')
        this.formData.descAddr = newAddr[newAddr.length - 1]
        // 地区的回显
        const lastArr = this.editItem.addr.split('-')
        const selectArr = [
          TextToCode[lastArr[0]].code,
          TextToCode[lastArr[0]][lastArr[1]].code,
          TextToCode[lastArr[0]][lastArr[1]][lastArr[2]].code
        ]
        this.formData.selectedOptions = selectArr
      } catch (error) {
        console.log(error)
      }
    }
  }

}
</script>

<style>

</style>
